<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/goodsList.css" />
    <link rel="stylesheet" href="../css/search.css" />
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/cookie.js"></script>
  </head>

  <body>
    <!-- 引入公共头部 -->
    <div class="header"></div>
    <script type="text/javascript">
      $(".header").load("common/head.html", function () {
        //cookie存储当前用户信息
        var cookie = document.cookie;
        if (cookie) {
          // console.log(111);
          var username = getCookie("lgc");
          if (username) {
            // console.log($(".tipsBar"));
            $(".tipsBar").html(
              `<span>欢迎您,${username} | </span><span onclick="exit()">退出</span>`
            );
          }
        }
      });
    </script>

    <!-- 主体 -->
    <div class="main cl">
      <div class="sort">
        <h2>分类</h2>
        <div class="line"></div>
        <div class="buy">
          <li>篮球</li>
          <li>服装</li>
          <li>球鞋</li>
        </div>
        <h2>筛选</h2>
        <div class="line"></div>
        <div class="rangeBox">
          <div class="range">
            <span>价格</span>
            <span>-</span>
          </div>
          <div class="price">
            <div class="search">
              <input type="text" />
              <div class="ll"></div>
              <input type="text" />
              <a href="#">搜索</a>
            </div>
            <div class="line"></div>
            <div class="priceRange">
              <li>0-139</li>
              <li>140-199</li>
              <li>200-299</li>
              <li>300-399</li>
              <li>400-499</li>
              <li>500-599</li>
            </div>
          </div>
        </div>

        <div class="seasons">
          <div class="range">
            <span>季节</span>
            <span>-</span>
          </div>
          <div class="season">
            <li>春季</li>
            <li>夏季</li>
            <li>秋季</li>
            <li>冬季</li>
          </div>
        </div>
        <div class="gender">
          <div class="range">
            <span>性别</span>
            <span>-</span>
          </div>
          <div class="sex">
            <li>男性</li>
            <li>女性</li>
          </div>
        </div>
        <div class="line"></div>
        <p class="checked">已选项:</p>
        <div class="line"></div>
      </div>

      <div class="goodsWarp">
        <form class="search_bar" onsubmit="return false">
          <div class="orderBox">
            <div class="orderColBox">
              <label>
                默认
                <input type="radio" checked="" class="orderCol" value="id" />
              </label>
              <label>
                销量
                <input type="radio" class="orderCol" value="sales" />
              </label>
              <label>
                价格
                <input type="radio" class="orderCol" value="nowprice" />
                原价
                <input type="radio" class="orderCol" value="originalcost" />
              </label>
            </div>

            <div class="orderTypeBox">
              <label>
                升序
                <input
                  type="radio"
                  checked=""
                  name="orderType"
                  class="orderType asc"
                  value="asc"
                />
              </label>
              <label>
                降序
                <input
                  type="radio"
                  name="orderType"
                  class="orderType desc"
                  value="desc"
                />
              </label>
            </div>
            <div class="showNumBox">
              <select class="select">
                <option value="8" selected="">每页显示8条</option>
                <option value="12">每页显示12条</option>
                <option value="16">每页显示16条</option>
              </select>
            </div>
            <input type="reset" class="resetBtn" value="重置" />
          </div>
        </form>

        <div id="allgoods" class="goodsList cl">
          <li>
            <a href="#">
              <div class="goodsImg">
                <img
                  src="../images/x1602918145881_3573_x_192_x_192.jpg"
                  alt=""
                />
              </div>
              <span class="color">3种颜色</span>
              <p>【吴磊同款】匹克中国力量秋季新款男子篮球背心 DF713001</p>
            </a>
            <div class="price cl">
              <span>￥159</span>
              <div class="price1 cl"><span>￥</span><span>199</span></div>
            </div>
          </li>
        </div>

        <div class="pageBox cl">
          <button class="prev">上一页</button>
          <span class="pageTips">1/4</span>
          <button class="next">下一页</button>
        </div>
      </div>
    </div>

    <footer></footer>
    <script>
      $("footer").load(`common/footer.html`);
    </script>
  </body>
  <script>
    var cookie = document.cookie;
    if (cookie) {
      var username = getCookie("lgc");
    }
    console.log(username);
    function exit() {
      deleteCookie("lgc");
      location.reload();
    }
    var type = ""; //关键字/类型
    if (window.location.search) {
      var str = window.location.search.substring(1);
      // console.log(str);
      var val = str.split("=")[1];
      type = decodeURIComponent(val); //转码成中文
    }
    var orderCol = "id"; //筛选条件
    var orderType = "asc";
    var pageIndex = 1;
    var showNum = 8; //默认展示 id 正序  第一页 一页展示8
    loadGoods(); //默认展示 在#allgoods下
    async function loadGoods() {
      var result = await searchAllGoodsLimit({
        type,
        orderCol,
        orderType,
        pageIndex,
        showNum,
      });
      // console.log(result);
      var status = result.status;
      var msg = result.maxPage;
      var maxPage = result.maxPage;
      var count = result.count;
      var currentIndex = result.currentIndex;
      var arr = result.list;
      var res = "";
      if (count == 0) {
        $("#allgoods").html("该分类下暂无商品");
      }
      if (status) {
        if (arr.length) {
          arr.forEach(item => {
            // console.log(item);
            res += `<li>
                    <a href="goodsDetail.html?pid=${item.pid}">
                        <div class="goodsImg">
                            <img src="../${item.imgurl}" alt="">
                        </div>
                        <span class="color">销量:${item.sales}件</span>
                        <p>${item.pname}<</p>
                    <div class="price cl">
                        <span>￥${item.nowprice}</span>
                        <div class="price1 cl">
                            <span>￥</span><span>${item.originalcost}</span>
                        </div>
                    </div>
                  </a>
                </li>`;
          });
          $("#allgoods").html(res);

          pageIndex = pageIndex > maxPage ? maxPage : pageIndex;

          $(".pageTips").html(`${currentIndex}/${maxPage}`);

          $(".prev").off();
          $(".prev").click(function () {
            if (pageIndex < 1) return false;
            pageIndex--;
            console.log(pageIndex);
            loadGoods();
          });

          $(".next").off();
          $(".next").click(function () {
            if (pageIndex < maxPage) {
              pageIndex++;
            } else {
              pageIndex = maxPage;
            }
            loadGoods();
          });
        }
      } else {
        alert(msg);
      }
    }

    // 搜索 分页:
    $(document)
      .on("click", ".sort", function (e) {
        type = e.target.innerHTML;
        // console.log(type);
        loadGoods();
      })
      .on("click", ".searchBtn", function () {
        type = $(".searchCon").val();
        console.log(type);
        loadGoods();
      })
      .on("click", ".orderCol", function () {
        orderCol = $(this).val();
        loadGoods();
      })
      .on("click", ".orderType", function () {
        orderType = $(this).val();
        loadGoods();
      })
      .on("change", ".select", function () {
        showNum = $(this).val();
        console.log(showNum);
        loadGoods();
      })
      .on("click", ".resetBtn", function () {
        type = "";
        orderCol = "id";
        orderType = "asc";
        pageIndex = 1;
        showNum = 20;
        loadGoods();
      });
  </script>
</html>
